<template>
  <div class="columns">
    <div class="column is-full">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span><em class="fa fa fa-book"> 录入物资信息 </em></span>
        </div>
        <div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">

            <el-form-item label="物资名称" prop="goodsName"  required>
              <el-col :span="11">
                <el-input
                    v-model="ruleForm.goodsName"
                    placeholder="请输入物资名称"
                />
              </el-col>
            </el-form-item>


            <el-form-item label="物资类型" prop="goodsTypeId" required>
              <el-col :span="11">
              <el-select
                  v-model="ruleForm.goodsTypeId"
                  filterable
                  placeholder="请输入或选择物资类型">
                <el-option
                    v-for="item in goodsTypeOptions"
                    :key="item.goodsTypeId"
                    :label="item.goodsTypeName"
                    :value="item.goodsTypeId">
                </el-option>
              </el-select>
              </el-col>
            </el-form-item>


            <el-form-item label="物资规格" prop="goodsSpecifications" required>
              <el-col :span="11">
              <el-input
                  v-model="ruleForm.goodsSpecifications"
                  placeholder="请输入物资规格"
              />
              </el-col>
            </el-form-item>
            <el-form-item label="供应商" prop="supplierId" required>
              <el-col :span="11">
                <el-select
                    v-model="ruleForm.supplierId"
                    filterable
                    placeholder="请输入或选择物资供应商">
                  <el-option
                      v-for="item in supplierOptions"
                      :key="item.supplierId"
                      :label="item.supplierName"
                      :value="item.supplierId">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>

            <el-form-item label="物资生产时间" required>
              <el-col :span="11">
                <el-date-picker
                    v-model="ruleForm.productionTime"
                    type="date"
                    placeholder="请选择物资生产时间"
                    format="yyyy 年 MM 月 dd 日">
                </el-date-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="保质期（天）" prop="shelfLife" required>
              <el-col :span="11">
              <el-input
                  v-model="ruleForm.shelfLife"
                  placeholder="请输入保质期（天）"
              />
              </el-col>
            </el-form-item>

            <el-form-item label="物资备注" prop="goodsAttentionNote">
              <el-col :span="11">
              <el-input type="textarea" v-model="ruleForm.goodsAttentionNote"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
              >录入物资信息
              </el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>

import {addGoods, getGoodsType, getSupplier} from "@/api/goods";
import {mapGetters} from "vuex";

export default {
  name: "addGoods",
  computed: {
    ...mapGetters(["token", "user"]),
  },
  data() {
    return {
      contentEditor: {},
      imageUrl: '',
      goodsTypeOptions: [],
      supplierOptions: [],

      ruleForm: {
        goodsTypeId: null,
        goodsName: null,
        goodsSpecifications: null,
        supplierId: null,
        goodsAttentionNote: null,
        productionTime: null,
        shelfLife: null,
      },
      rules: {},
    };
  },
  //下拉框
  created() {
    getGoodsType().then((response) => {
      this.goodsTypeOptions = response.data;
    })
    getSupplier().then((response) => {
      this.supplierOptions = response.data;
    })

  },

  methods: {
    submitForm(formName) {

      addGoods(this.ruleForm, this.user.userIdStr).then((response) => {
        const {data} = response;
        setTimeout(() => {
          this.$router.push({
            name: "post-detail",
            params: {id: data.goodsIdStr},
          });
        }, 800);
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.warehouseId = 0;
    },


  },
};
</script>

<style>

</style>
